<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>酒店查询列表</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="./css/mui.min.css" rel="stylesheet" />
		<link href="../mui/css/mui.indexedlist.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<style>
			.mui-bar-nav~.mui-content {
				padding-top: 6.4rem;
			}
			
			.mui-content {
				margin-top: 10.9rem;
				/*margin-bottom: 3.3rem;*/
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 0;
			}
			
			.mui-content li:last-child {
				padding-bottom: 1.5rem;
			}
			
			.mui-table-view-cell {
				padding: 0.75rem 1.2rem;
			}
			
			.mui-table-view-cell:first-child {
				padding-top: 1.2rem;
			}
			
			.mui-table-view-cell:last-child {
				padding-bottom: 1.2rem;
			}
			
			.hotel-header {
				font-size: 1.2rem;
				color: #333;
			}
			
			.hotel-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 1.2rem;
			}
			
			.mui-navigate-right:after,
			.mui-push-right:after {
				right: inherit;
			}
			
			.mui-bar a {
				position: relative;
			}
			
			.mui-indexed-list {
				width: 78%;
				border-radius: 0.5rem;
				border: none;
			}
			
			.mui-indexed-list-search {
				border: none;
			}
			
			.mui-bar input[type=search] {
				margin: 0;
			}
			
			.mui-bar .mui-icon {
				padding: 0;
			}
			
			.mui-search .mui-placeholder {
				height: 3rem;
				font-size: 1rem;
				line-height: 3rem;
			}
			
			.mui-search .mui-placeholder .mui-icon {
				font-size: 1.6rem;
				margin: 0;
			}
			
			.mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear {
				top: 0.4rem;
			}
			
			.mui-bar-nav.mui-bar .mui-icon {
				padding-right: 0.5rem;
				padding-left: 0.5rem;
			}
			
			.hotel-list {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}
			
			.hotel-list-img {
				position: relative;
				width: 7.5rem;
				height: 7.5rem;
				margin-right: 0.9rem;
			}
			
			.hotel-list-img img {
				width: 7.5rem;
				height: 7.5rem;
				vertical-align: middle;
				border-radius: 0.4rem;
			}
			
			.hot {
				position: absolute;
				top: -0.7rem;
				right: -0.6rem;
				width: 3rem;
				height: 1.8rem;
				line-height: 1.8rem;
				font-size: 1.2rem;
				text-align: center;
				color: #fff;
				background-color: #e61874;
				border-radius: 0.9rem;
			}
			
			.hotel-list-info {
				display: flex;
				flex-direction: column;
				width: 50%;
			}
			
			.info-title {
				font-size: 1.6rem;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				-webkit-line-clamp: 1;
			}
			
			.info-font-12 {
				font-size: 1.2rem;
				color: #666;
			}
			
			.summary {
				color: #e61874;
				padding: 0.9rem 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				-webkit-line-clamp: 1;
			}
			
			.score {
				padding-bottom: 0.6rem;
			}
			
			.address {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				-webkit-line-clamp: 1;
			}
			
			.hotel-list-price {
				width: 20%;
				font-size: 0;
				text-align: right
			}
			
			.hotel-list-price .sign {
				font-size: 1rem;
				color: #e61874;
			}
			
			.hotel-list-price .hotel-price {
				font-size: 1.4rem;
				color: #e61874;
			}
			
			.hotel-list-price .start {
				font-size: 1.2rem;
				color: #666;
			}
			/*.hotel-list-price img {
				width: 0.8rem;
			}*/
			/*.info-content-top {
				font-size: 0.75rem;
			}
			
			.info-content-bottom span {
				font-size: 0.6rem;
				color: #666;
			}
			
			.info-content-bottom span.right30 {
				position: absolute;
				right: 1.5rem;
			}*/
			
			.mui-table-view:before,
			.mui-table-view:after {
				background-color: transparent;
			}
			
			.mui-table-view-cell:after {
				left: 0;
				background-color: transparent;
			}
			
			.mui-input-row {
				font-size: 1.4rem;
				background-color: #fff;
				padding: 0 1.2rem;
			}
			
			.hotel-fixed-area {
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
			
			.hotel-fixed-area img {
				width: 50%;
			}
			
			.view {
				position: fixed;
				bottom: 4.8rem;
				right: 1.2rem;
				background-color: #fff;
				width: 4.8rem;
				height: 4.8rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border: 1px solid #e61874;
				border-radius: 50%;
				z-index: 100;
			}
			
			.view img {
				width: 1.5rem;
			}
			
			.view span {
				font-size: 1rem;
				color: #e61874;
			}
			
			/* 筛选--开始 */
			.hotel-footer {
				position: absolute;
				border: none;
				background-color: #f0f0f0;
				top: 6.4rem;
				height: 4.5rem;
			}
			
			.hotel-footer-menu {
				display: flex;
				text-align: center;
			}
			
			.hotel-footer-menu li {
				font-size: 1.2rem;
				height: 4.5rem;
				line-height: 4.5rem;
				padding: 0;
			}
			
			.option-item {
				position: relative;
				color: #999;
				padding: 1.5rem 0;
			}
			
			.option-item:after {
				position: absolute;
				content: '';
				width: 0.4rem;
				height: 0.6rem;
				right: -1.2rem;
				bottom: 2.2rem;
				background-image: url(../styles/images/list/icon_direction_selected_gray.png@2x.png);
				background-size: 0.4rem 0.6rem;
			}
			
			.default:after {
				position: absolute;
				content: '';
				width: 0.4rem;
				height: 0.6rem;
				right: -1.2rem;
				bottom: 2.2rem;
				background-image: url(../styles/images/list/icon_direction_selected.png@2x.png);
				background-size: 0.4rem 0.6rem;
			}
			
			.option-item.active {
				color: #e61874;
			}
			
			.option-item.active:after {
				position: absolute;
				content: '';
				width: 0.6rem;
				height: 0.4rem;
				right: -1.2rem;
				bottom: 2.2rem;
				background-image: url(../styles/images/list/icon_direction_down.png@2x.png);
				background-size: 0.6rem 0.4rem;
			}
			
			.recommend-box,
			.price-box,
			.filter-box {
				position: absolute;
				top: 4.5rem;
				left: 0;
				width: 100%;
				max-height: 30rem;
				overflow-y: auto;
				padding: 2.4rem 1.2rem 0.3rem 1.2rem;
				background-color: #fff;
			}
			/* 推荐排序--开始 */
			
			.recommend-item {
				font-size: 1.4rem;
				color: #666;
				padding-left: 2.1rem;
				padding-bottom: 2.1rem;
			}
			
			.recommend-item:last-child {
				padding-bottom: 1.2rem;
			}
			
			.recommend-item.active {
				position: relative;
				color: #e61374;
			}
			
			.recommend-item.active:before {
				display: inline-block;
				position: absolute;
				left: 0;
				top: 0.4rem;
				width: 1.2rem;
				height: 0.8rem;
				content: '';
				background-image: url(../styles/images/list/icon_ensure_nor.png@2x.png);
				background-size: 1.2rem 0.8rem;
			}
			/*.recommend-item span {
				font-size: 0.7rem;
				color: #666;
				padding-left: 1.05rem;
			}*/
			/*.recommend-item span.active {
				position: relative;
				color: #e61374;
			}*/
			
			.recommend-item span.active:before {
				display: inline-block;
				position: absolute;
				left: 0;
				top: 0.4rem;
				width: 1.2rem;
				height: 0.8rem;
				content: '';
				background-image: url(../styles/images/list/icon_ensure_nor.png@2x.png);
				background-size: 1.2rem 0.8rem;
			}
			/* 推荐排序--结束 */
			/* 刷选项--开始 */
			
			.mui-input-row.mui-input-range {
				padding-right: 1.2rem;
				padding-bottom: 1.8rem;
			}
			
			.list-box:last-child .filter-tag {
				margin-bottom: 0;
			}
			
			.price-box p,
			.filter-box p {
				display: inline-block;
				width: 100%;
				font-size: 1.2rem;
				color: #999;
				padding-left: 0.9rem;
				margin-bottom: 0;
			}
			
			.price-tag,
			.filter-tag {
				height: 3rem;
				margin: 1.2rem 0 1.5rem;
			}
			
			.price-tag li,
			.filter-tag li {
				float: left;
				height: 3rem;
				line-height: 2.8rem;
				font-size: 1.2rem;
				color: #333;
				text-align: center;
				border: 1px solid #999;
				border-radius: 1.45rem;
				margin-right: 0.9rem;
				margin-bottom: 1.2rem;
				padding: 0 0.6rem;
			}
			
			.filter-tag li {
				min-width: 22.5%;
			}
			
			.filter-tag li:nth-child(4n) {
				margin-right: 0;
			}
			
			.boxview {
				background: rgba(0, 0, 0, 1);
				height: 100%;
				width: 100%;
			}
			
			.price-tag li {
				min-width: 30%;
				margin-right: 1.3rem;
			}
			
			.price-tag li:nth-child(3n) {
				margin-right: 0;
			}
			
			li.default {
				color: #E61874;
				border-color: #e61874;
			}
			/* 筛选项--结束 */
			/* 筛选--结束 */
			
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-col-xs-9 {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 5rem;
				width: 100%;
			}
			
			.mui-control-content {
				display: block;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
			
			.mui-bar-nav~.mui-content .mui-pull-top-pocket {
				top: 0;
			}
			
			.hidden {
				display: none;
			}
			
			.show {
				display: block;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="酒店名、地名">
				</div>
			</div>
			<a class="mui-icon mui-pull-right" style="font-size: 1.6rem;padding-right: 1.2rem;" data-url="./test11.html">
				<img width="24" style="vertical-align: middle;" src="../styles/images/list/icon_map_white_nor.png@2x.png">
			</a>
			<footer class="hotel-footer">
				<div id="f-tit" class="f-tit">
					<ul class="hotel-footer-menu hotel-footer-menu-c4" id="optionul">
						<li class="option" id="recommend">
							<a class="option-item default" href="#" style="color: #e61874;">推荐排序</a>
						</li>
						<li class="option" id="price">
							<a class="option-item" href="#">价格/星级</a>
						</li>
						<li class="option" id="position">
							<a class="option-item" href="#">位置区域</a>
						</li>
						<li class="option" id="filter">
							<a class="option-item" href="#">筛选</a>
						</li>
					</ul>
				</div>
				<div id="f-con" class="f-con">
					<!--推荐排序-->
					<div class="con-box recommend-box hidden">
						<ul>
							<li class="recommend-item active">
								推荐排序
							</li>
							<li class="recommend-item">
								距离优先
							</li>
							<li class="recommend-item">
								低价优先
							</li>
							<li class="recommend-item">
								高价优先
							</li>
							<li class="recommend-item">
								好评优先
							</li>
						</ul>
					</div>
					<!--星级筛选-->
					<div class="con-box price-box hidden">
						<div class="list-box">
							<p>星级筛选</p>
							<ul class="price-tag">
								<li>经济型</li>
								<li>二星</li>
								<li>三星/舒适</li>
								<li>四星/高档</li>
								<li>五星/豪华</li>
								<li class="default">不限</li>
							</ul>
						</div>
						<div class="list-box">
							<p>价格筛选：<span id='block-range-val'>0</span></p>
							<div class="mui-input-row mui-input-range">
								<input type="range" id='block-range' value="0" min="0" max="1000">
							</div>
						</div>
					</div>
					<!--位置区域-->
					<div class="con-box position-box hidden">
						<div class="mui-row mui-fullscreen" style="height: 30rem;background: #FFFFFF;top:4.5rem;z-index: 10;">
							<div class="mui-col-xs-3">
								<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
								</div>
							</div>
							<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
							</div>
						</div>
					</div>
					<!--筛选-->
					<div class="con-box filter-box hidden">
						<div>
							<div class="list-box">
								<p>特色专题</p>
								<ul class="filter-tag">
									<li>火辣</li>
									<li>烂漫</li>
									<li>纯情</li>
									<li>情趣</li>
								</ul>
							</div>
							<div class="list-box">
								<p>评分</p>
								<ul class="filter-tag">
									<li>4.5分以上</li>
									<li>4分以上</li>
									<li>3.5分以上</li>
									<li>3分以上</li>
								</ul>
							</div>
							<div class="list-box">
								<p>设施服务</p>
								<ul class="filter-tag">
									<li>情趣用品</li>
									<li>免费wifi</li>
									<li>停车场</li>
								</ul>
							</div>
							<div class="list-box">
								<p>舒适性</p>
								<ul class="filter-tag">
									<li>锦江之星品尚酒店</li>
									<li>一品公寓</li>
								</ul>
							</div>
							<div class="list-box">
								<p>高档型</p>
								<ul class="filter-tag">
									<li>新桃园</li>
								</ul>
							</div>
							<div class="list-box">
								<p>闪住</p>
								<ul class="filter-tag">
									<li>闪住</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</footer>
		</header>

		<div class="mui-content">
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view mui-content-body" id="hotel-list">
						<li class="mui-table-view-cell hotel-list">
							<div class="hotel-list-img">
								<img src="../styles/images/avatar-icon1.png" />
								<div class="hot">hot</div>
							</div>
							<div class="hotel-list-info">
								<span class="info-title">金广快捷</span>
								<span class="info-font-12 summary">爱爱情趣好去处，嗨翻天</span>
								<span class="info-font-12 score">4.8分 | 非常棒</span>
								<span id="address" class="info-font-12 address">距您2.9公里</span>
							</div>
							<div class="hotel-list-price">
								<span class="sign" style="font-size: 0.5rem;">￥</span>
								<span class="hotel-price">98</span>
								<span class="start">起</span>
							</div>
							<div class="hotel-fixed-area">
								<img src="../styles/images/go-icon.png" />
							</div>
						</li>
						<li class="mui-table-view-cell hotel-list">
							<div class="hotel-list-img">
								<img src="../styles/images/avatar-icon2.png" />
							</div>
							<div class="hotel-list-info">
								<span class="info-title">南国连锁酒店</span>
								<span class="info-font-12 summary">爱爱情趣好去处，嗨翻天</span>
								<span class="info-font-12 score">4.8分 | 非常棒</span>
								<span class="info-font-12 address">距您2.9公里</span>
							</div>
							<div class="hotel-list-price">
								<span class="sign">￥</span>
								<span class="hotel-price">298</span>
								<span class="start">起</span>
							</div>
							<div class="hotel-fixed-area">
								<img src="../styles/images/go-icon.png" />
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="view" data-url="./view-more.html">
			<img src="../styles/images/view.png" />
			<span>看过</span>
		</div>

		<script src="js/jquery-2.1.1.js"></script>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				},
				preloadPages: [{
					id: 'hotel-detail2.html',
					url: 'hotel.detail2.html'
				}],
				swipeBack: true //启用右滑关闭功能
			});
			
			// 筛选栏的展示和隐藏
			var $option = $(".option");
			var $optionITem = $(".optionITem");
			var $conBox = $(".con-box");
			var index = 0;

			$option.click(function(e){
				$(this).children().toggleClass("active");
				$(this).siblings().children().removeClass("active");
				var index = $option.index(this);
				$conBox.eq(index).slideToggle().siblings().css("display", "none");
			});
			
			// 筛选栏的展示和隐藏
			//			var optionItem = document.getElementsByClassName("option-item"); // 获取所有选项
			//			var conBox = document.getElementsByClassName("con-box");
			//			for(var i = 0; i < optionItem.length; i++) {
			//				optionItem[i].id = i;
			//				optionItem[i].addEventListener('tap', function(e) {
			//					index++;
			//					console.log(index);
			//					var len = this.parentNode.parentNode.children.length;
			//					for(var j = 0; j < len; j++) {
			//						optionItem[j].classList.remove('active');
			//						conBox[j].style.display = "none";
			//					}
			//					if(index % 2 == 1) {
			//						this.classList.add('active');
			//						conBox[this.id].style.display = "block";
			//						//						index++;
			//					}
			//					if(index % 2 == 0) {
			//						this.classList.remove('active');
			//						conBox[this.id].style.display = "none";
			//					}
			//					//					this.classList.add('active');
			//					//					conBox[this.id].style.display = "block";
			//				});
			//			}

			// 推荐排序
			var recommendItem = document.getElementsByClassName("recommend-item"); // 获取所有选项
			for(var i = 0; i < recommendItem.length; i++) {
				recommendItem[i].id = i;
				recommendItem[i].addEventListener('tap', function(e) {
					var len = this.parentNode.children.length;
					for(var j = 0; j < len; j++) {
						recommendItem[j].classList.remove('active');
					}
					this.classList.add('active');
				});
			}

			// 向酒店详情页传值
			var hotelDetailPage = null;
			// 添加列表项的点击事件
			mui('#hotel-list').on('tap', '.mui-table-view-cell', function(event) {
				var hotelid = this.getAttribute('id'); // 获取酒店id
				var hotelImgSrc = this.children[0].children[0].getAttribute('src'); // 获取酒店图片
				var hotelDistance = this.children[1].children[3].innerHTML; // 获取酒店距离
				// 获得酒店详情页
				if(!hotelDetailPage) {
					hotelDetailPage = plus.webview.getWebviewById("hotel-detail2.html");
				}

				mui.fire(hotelDetailPage, 'hdID', {
					id: hotelid,
					src: hotelImgSrc,
					distance: hotelDistance
				});

				// 打开酒店详情页面
				mui.openWindow({
					id: 'hotel-detail2.html',
					show: {
						autoShow: true
					}
				});
			});

			// 第一步，从缓存中获取当前位置的经纬度
			var curLng = localStorage.getItem("myLng");
			var curLat = localStorage.getItem("myLat");
			//			console.log(curLng, curLat);

			// 第二步：传入酒店经纬度，与设备当前的经纬度计算得到两者之间的距离
			function distance(lng, lat, cb) {
				var point1 = new plus.maps.Point(curLng, curLat); // 通过传入的经纬度定位设备当前位置的坐标
				var point2 = new plus.maps.Point(lng, lat); // 通过传入的经纬度定位酒店当前位置的坐标
				plus.maps.Map.calculateDistance(point1, point2, function(event) {
					var dist = event.distance; // 转换后的距离值
					// console.log("转换后的距离值", dist);
					cb(dist);
				}, function(e) {
					alert("Failed:" + JSON.stringify(e));
				});
			}

			var listDataObj; //ajax获取的数据
			var distanceArr = [];
			// 请求数据并渲染
			mui.plusReady(function() {
				var hotelList = document.getElementById("hotel-list"); // 酒店列表
				listDataObj = JSON.parse(localStorage.getItem('listData')); // 从缓存中拿到酒店列表页的数据
				console.log(JSON.stringify(listDataObj));
				var dArr = localStorage.getItem('distanceArr').split(",");
				var html = "";
				var regEx = /(^\s*)|(<[^>]*>)/g;
				for(var i = 0; i < listDataObj.length; i++) {
					html += '<li id="' + listDataObj[i].hotelid + '" class="mui-table-view-cell hotel-list">';
					html += '<div class="hotel-list-img"><img src="' + listDataObj[i].appearancepicurl + '" /><div class="hot">hot</div></div>';
					html += '<div class="hotel-list-info"><span class="info-title">' + listDataObj[i].hotelchnname + '</span>';
					html += '<span class="info-font-12 summary">' + listDataObj[i].hotelintroduce.replace(regEx, "") + '</span>';
					html += '<span class="info-font-12 score">4.8分 | '; //' + listDataObj[i].commentscore + '
					if(listDataObj[i].commentscore >= 3 && listDataObj[i].commentscore < 4.0) {
						scoreText = "一般";
					} else if(listDataObj[i].commentscore >= 4.0 && listDataObj[i].commentscore < 4.5) {
						scoreText = "不错";
					} else if(listDataObj[i].commentscore >= 4.5 && listDataObj[i].commentscore < 4.8) {
						scoreText = "很好";
					} else if(listDataObj[i].commentscore >= 4.8 && listDataObj[i].commentscore < 5) {
						scoreText = "非常棒";
					} else {
						scoreText = "完美";
					}
					html += '<span>' + scoreText + '</span></span>';
					html += '<span class="info-font-12 address">距您' + dArr[i] + '公里</span></div>';
					html += '<div class="hotel-list-price"><span class="sign">￥</span>';
					html += '<span class="hotel-price">' + listDataObj[i].saleprice + '</span>';
					html += '<span class="start">起</span></div>';
					html += '<div class="hotel-fixed-area"><img src="../styles/images/go-icon.png" /></div></li>';
				}
				hotelList.innerHTML = html;
			});

			function list3() {
				var controls = document.getElementById("segmentedControls");
				var contents = document.getElementById("segmentedControlContents");
				var html = [];
				var i = 1,
					j = 1,
					m = 9, //左侧选项卡数量+1
					n = 21; //每个选项卡列表数量+1
				for(; i < m; i++) {
					html.push('<a class="mui-control-item" data-index="' + (i - 1) + '" href="#content' + i + '">选项' + i + '</a>');
				}
				controls.innerHTML = html.join('');
				html = [];
				for(i = 1; i < m; i++) {
					html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
					for(j = 1; j < n; j++) {
						html.push('<li class="mui-table-view-cell">第' + i + '个选项卡子项-' + j + '</li>');
					}
					html.push('</ul></div>');
				}
				contents.innerHTML = html.join('');
				//默认选中第一个
				controls.querySelector('.mui-control-item').classList.add('mui-active');
				// contents.querySelector('.mui-control-content').classList.add('mui-active');
				(function() {
					var controlsElem = document.getElementById("segmentedControls");
					var contentsElem = document.getElementById("segmentedControlContents");
					var controlListElem = controlsElem.querySelectorAll('.mui-control-item');
					var contentListElem = contentsElem.querySelectorAll('.mui-control-content');
					var controlWrapperElem = controlsElem.parentNode;
					var controlWrapperHeight = controlWrapperElem.offsetHeight;
					var controlMaxScroll = controlWrapperElem.scrollHeight - controlWrapperHeight; //左侧类别最大可滚动高度
					var maxScroll = contentsElem.scrollHeight - contentsElem.offsetHeight; //右侧内容最大可滚动高度
					var controlHeight = controlListElem[0].offsetHeight; //左侧类别每一项的高度
					var controlTops = []; //存储control的scrollTop值
					var contentTops = [0]; //存储content的scrollTop值
					var length = contentListElem.length;
					for(var i = 0; i < length; i++) {
						controlTops.push(controlListElem[i].offsetTop + controlHeight);
					}
					for(var i = 1; i < length; i++) {
						var offsetTop = contentListElem[i].offsetTop;
						if(offsetTop + 100 >= maxScroll) {
							var height = Math.max(offsetTop + 100 - maxScroll, 100);
							var totalHeight = 0;
							var heights = [];
							for(var j = i; j < length; j++) {
								var offsetHeight = contentListElem[j].offsetHeight;
								totalHeight += offsetHeight;
								heights.push(totalHeight);
							}
							for(var m = 0, len = heights.length; m < len; m++) {
								contentTops.push(parseInt(maxScroll - (height - heights[m] / totalHeight * height)));
							}
							break;
						} else {
							contentTops.push(parseInt(offsetTop));
						}
					}
					contentsElem.addEventListener('scroll', function() {
						var scrollTop = contentsElem.scrollTop;
						for(var i = 0; i < length; i++) {
							var offsetTop = contentTops[i];
							var offset = Math.abs(offsetTop - scrollTop);
							// console.log("i:"+i+",scrollTop:"+scrollTop+",offsetTop:"+offsetTop+",offset:"+offset);
							if(scrollTop < offsetTop) {
								if(scrollTop >= maxScroll) {
									onScroll(length - 1);
								} else {
									onScroll(i - 1);
								}
								break;
							} else if(offset < 20) {
								onScroll(i);
								break;
							} else if(scrollTop >= maxScroll) {
								onScroll(length - 1);
								break;
							}
						}
					});
					var lastIndex = 0;
					//监听content滚动
					var onScroll = function(index) {
						if(lastIndex !== index) {
							lastIndex = index;
							var lastActiveElem = controlsElem.querySelector('.mui-active');
							lastActiveElem && (lastActiveElem.classList.remove('mui-active'));
							var currentElem = controlsElem.querySelector('.mui-control-item:nth-child(' + (index + 1) + ')');
							currentElem.classList.add('mui-active');
							//简单处理左侧分类滚动，要么滚动到底，要么滚动到顶
							var controlScrollTop = controlWrapperElem.scrollTop;
							if(controlScrollTop + controlWrapperHeight < controlTops[index]) {
								controlWrapperElem.scrollTop = controlMaxScroll;
							} else if(controlScrollTop > controlTops[index] - controlHeight) {
								controlWrapperElem.scrollTop = 0;
							}
						}
					};
					//滚动到指定content
					var scrollTo = function(index) {
						contentsElem.scrollTop = contentTops[index];
					};
					mui(controlsElem).on('tap', '.mui-control-item', function(e) {
						scrollTo(this.getAttribute('data-index'));
						return false;
					});
				})();
			}

			// 下拉刷新
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					console.log(cells.length);
					for(var i = cells.length, len = i + 3; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell hotel-list';
						li.innerHTML = '<div class="hotel-list-img">' +
							'<img src="../styles/images/avatar-icon1.png" />' +
							'<div class="hot">hot</div></div>' +
							'<div class="hotel-list-info">' +
							'<span class="info-title">金广快捷</span>' +
							'<span class="info-font-12 summary">爱爱情趣好去处，嗨翻天</span>' +
							'<span class="info-font-12 score">4.8分 | 非常棒</span>' +
							'<span id="address" class="info-font-12 address">距您2.9公里</span></div>' +
							'<div class="hotel-list-price">' +
							'<span class="sign" style="font-size: 0.5rem;">￥</span>' +
							'<span class="hotel-price" style="font-size: 0.7rem;">98</span>' +
							'<span class="start">起</span></div>' +
							'<div class="hotel-fixed-area">' +
							'<img src="../styles/images/go-icon.png" /></div>';
						//						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
						//下拉刷新，新纪录插到最前面；
						table.insertBefore(li, table.firstChild);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1000);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for(var i = cells.length, len = i + 3; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell hotel-list';
						li.innerHTML = '<div class="hotel-list-img">' +
							'<img src="../styles/images/avatar-icon1.png" />' +
							'<div class="hot">hot</div></div>' +
							'<div class="hotel-list-info">' +
							'<span class="info-title">金广快捷</span>' +
							'<span class="info-font-12 summary">爱爱情趣好去处，嗨翻天</span>' +
							'<span class="info-font-12 score">4.8分 | 非常棒</span>' +
							'<span id="address" class="info-font-12 address">距您2.9公里</span></div>' +
							'<div class="hotel-list-price">' +
							'<span class="sign" style="font-size: 0.5rem;">￥</span>' +
							'<span class="hotel-price" style="font-size: 0.7rem;">98</span>' +
							'<span class="start">起</span></div>' +
							'<div class="hotel-fixed-area">' +
							'<img src="../styles/images/go-icon.png" /></div>';
						table.appendChild(li);
					}
				}, 1000);
			}
		</script>
	</body>

</html>